<template>
  <!-- 合同款项情况 -->
    <CommonTitle
            :titleName="state.type == 1 ? '招标合同协同审批' : '合同初稿'"
    ></CommonTitle>

    <div class="box">
        <el-form
                :inline="true"
                label-width="140"
                :model="formInline"
                :rules="rules"
                ref="formRef"
                class="demo-form-inline"
        >
            <el-row>
                <el-col :span="8">
                    <el-form-item label="所属项目" prop="projectId">
                        <el-select
                            clearable
                            :disabled="state.disabled"
                            v-model="formInline.projectId"
                            placeholder="请选择项目编号"
                        >
                            <el-option v-for="(item,index) in state.projectList" :key="index" :label="item.projectName" :value="item.projectId" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="合同名称" prop="contractName">
                        <el-input
                                :disabled="state.disabled"
                                v-model="formInline.contractName"
                                placeholder="请输入合同名称"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="合同编码" prop="contractNumber">
                        <el-input
                            :disabled="state.disabled"
                            v-model="formInline.contractNumber"
                            placeholder="请输入合同编码"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="合同类型" prop="typeContract">
                        <el-select
                                :disabled="state.disabled"
                                v-model="formInline.typeContract"
                                placeholder="请选择合同类型"
                        >
<!--                            <el-option label="招标合同" value="1" />-->
                            <el-option label="投资合同" value="2" />
<!--                            <el-option label="建设合同" value="3" />-->
<!--                            <el-option label="其他合同" value="4" />-->
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="合同总额" prop="contractAmount">
                        <el-input
                            :disabled="state.disabled"
                            v-model="formInline.contractAmount"
                            placeholder="请输入合同金额"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="签订份数">
                        <el-input
                                v-model.number="formInline.signNumber"
                                :disabled="state.disabled"
                                placeholder="请输入签约数量"
                        />
                    </el-form-item>
                </el-col>

                <!--                <el-col :span="8">
                    <el-form-item label="项目分类">
                        <el-input
                                v-model="formInline.projectType"
                                :disabled="state.disabled"
                                placeholder="请选择项目分类"
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="周期时间" prop="serviceStartTime">
                        <el-date-picker
                                :disabled="state.disabled"
                                v-model="formInline.serviceTimeValue"
                                type="daterange"
                                placeholder="请选择"
                                range-separator="-"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                value-format="YYYY-MM-DD hh:ss:mm"
                                @change="serviceTimeChange"
                        />
                    </el-form-item>
                </el-col>-->

                <el-col :span="8">
                    <el-form-item label="甲方单位" prop="signPartyA">
                        <el-input
                                :disabled="state.disabled"
                                v-model="formInline.signPartyA"
                                placeholder="请输入甲方单位"
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="乙方单位" prop="signPartyB">
                        <el-input
                                :disabled="state.disabled"
                                v-model="formInline.signPartyB"
                                placeholder="请输入乙方单位"
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="三方单位" prop="signPartyThree">
                        <el-input
                                :disabled="state.disabled"
                                v-model="formInline.signPartyThree"
                                placeholder="请输入三方单位"
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="资金流向" prop="capitalFlow">
                        <el-select
                                :disabled="state.disabled"
                                v-model="formInline.capitalFlow"
                                placeholder="请选择资金流向"
                                @change="capitalFlowChange"
                        >
                            <el-option label="流入" :value="1" />
                            <el-option label="流出" :value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="签约时间" prop="signTime">
                        <el-date-picker
                                clearable
                                placeholder="请选择签约时间"
                                v-model="formInline.signTime"
                                type="date"
                                :disabled="state.disabled"
                                value-format="YYYY-MM-DD HH:mm:ss"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="签约方式" prop="signingMethod">
                        <el-select
                            :disabled="state.disabled"
                            v-model="formInline.signingMethod"
                            placeholder=""
                        >
                            <el-option
                                v-for="item in state.projectTendersWayList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="周期时间" prop="serviceStartTime">
                        <el-date-picker
                                :disabled="state.disabled"
                                v-model="formInline.serviceTimeValue"
                                type="daterange"
                                placeholder="请选择"
                                range-separator="-"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                value-format="YYYY-MM-DD hh:ss:mm"
                                @change="serviceTimeChange"
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="24">
                    <el-form-item label="合同概况" prop="contractContent">
                        <el-input
                                :disabled="state.disabled"
                                v-model="formInline.contractContent"
                                type="textarea"
                                placeholder="请输入合同概况内容说明"
                        />
                    </el-form-item>
                </el-col>

               <el-col :span="24">
                    <el-form-item label="支付方式说明" prop="payExplain">
                        <el-input
                                v-model="formInline.payExplain"
                                type="textarea"
                                :disabled="state.disabled"
                                placeholder="请输入支付方式说明"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="签约方式说明" prop="signExplain">
                        <el-input
                                v-model="formInline.signExplain"
                                type="textarea"
                                :disabled="state.disabled"
                                placeholder="请输入签约方式说明"
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="24">
                    <el-form-item label="合同附件" prop="files">
                        <FileMinioUpload
                                :restriction="true"
                                :disabled="state.disabled"
                                :restrictionLimit="9"
                                @updateFiles="updateFiles"
                                v-model:files="formInline.files"
                                :show-button="!state.disabled"
                        />
                    </el-form-item>
                </el-col>
<!--                <el-col :span="5">
                    <el-form-item label="期数">
                        <el-input
                                :disabled="state.disabled"
                                v-model="state.payItem.term"
                                placeholder="请输入期数"
                        />
                    </el-form-item>
                </el-col>-->
<!--                <el-col :span="5">
                    <el-form-item label="资金流向">
                        <el-select
                                :disabled="state.disabled"
                                v-model="state.payItem.moneyFlowType"
                                placeholder="请选择资金流向"
                        >
                            <el-option label="流入" :value="1" />
                            <el-option label="流出" :value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>-->
<!--                <el-col :span="7">
                    <el-form-item label="付款范围">
                        <el-date-picker
                                v-model="state.payItem.settlementTimeValue"
                                @change="settlementTimeChange"
                                type="daterange"
                                :disabled="state.disabled"
                                range-separator="-"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                value-format="YYYY-MM-DD"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="金额">
                        <el-input
                                :disabled="state.disabled"
                                v-model="state.payItem.payableAmount"
                                placeholder="金额"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="2" v-if="!state.disabled">
                    <el-form-item label="" class="m-l10">
                        <el-button @click="addRow">添加结算方式</el-button>
                    </el-form-item>
                </el-col>-->
<!--                <el-col :span="24">
                    <el-form-item label="款项计划"> </el-form-item>
                    <tableCom
                            class="table_class"
                            :tableHead="tableHead"
                            :tableData="formInline.fundPlans"
                            :isRadio="false"
                            border
                            :height="300"
                            :isSelection="false"
                    >
                        <template #operate>
                            <el-table-column label="操作" width="200">
                                <template #default="{ row }">
                                    <el-button
                                            :disabled="state.disabled"
                                            size="small"
                                            type="primary"
                                            @click="deleteHandler(row)"
                                    >删除</el-button
                                    >
                                </template>
                            </el-table-column>
                        </template>
                    </tableCom>
                </el-col>-->
            </el-row>
        </el-form>

        <span class="d-flex a-center j-center dialog-footer" v-if="!state.disabled">
            <el-button type="primary" @click="goBack" class="button_cancel2"> 取消 </el-button>
            <el-button @click="submit" class="button_view">提交</el-button>
        </span>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import {
    ElDatePicker,
    ElRow,
    ElCol,
    ElForm,
    ElSelect,
    ElOption, ElMessage, ElFormItem
} from 'element-plus'
import CommonTitle from '@/components/CommonTitle.vue'
import { useRouter } from 'vue-router'
import FileMinioUpload from "@/components/FileMinioUpload.vue";
import {consoleApi, contractManagementApi} from "@/api/investment";
import {nanoid} from "@/views/constructionProjectManage/static/utools";

const router = useRouter();

const state = reactive({
    projectTendersWayList:[
        {
            label: '公开招标',
            value: 1
        },
        {
            label: '公开竞争性谈判',
            value: 2
        },
        {
            label: '公开竞争性磋商',
            value: 3
        },
        {
            label: '择优比选',
            value: 4
        },
        {
            label: '单一来源采购（公开）',
            value: 5
        },
        {
            label: '邀请竞争性谈判',
            value: 6
        },
        {
            label: '邀请竞争性磋商',
            value: 7
        },
        {
            label: '择优询价',
            value: 8
        },
        {
            label: '单一来源采购（非公开）',
            value: 9
        }
    ],
    auditStatus: [
        {
            label: '待审核',
            value: 1
        },
        {
            label: '审核成功',
            value: 2
        },
        {
            label: '审核驳回',
            value: 3
        }
    ],
    user: '',
    projectTaskId: '',
    projectId: '',
    itemId: '',
    type: '',
    payItem: {
        term: '',
        moneyFlowType: '',
        // settlementStartTime: [],
        settlementTimeValue:[],
        settlementStartTime:'',
        settlementEndTime:'',
        payableAmount:'',
        payId: ''
    },
    disabled: false,
    projectList:[]
})

const formInline = reactive({
    serviceTimeValue:[],
    projectId: "",
    contractId: "",
    contractNumber: "",
    contractName: "",
    capitalFlow: "",
    type: "", // 合同类型
    contractAmount: "",
    signNumber: "",
    signPartyA: "",
    signPartyB: "",
    signPartyThree: "",
    contractContent: "",
    payExplain: "",
    signTime: "",
    serviceStartTime: "",
    serviceEndTime: "",
    signExplain: "",
    signingMethod:'',
    typeContract:'',
    files: [
        /* {
             fileName: "",
             fileUrlKey: "",
         }*/
    ],
    fundPlans: [
       /* {
            term: "",
            payId: "",
            businessId: "",
            moneyFlowType: "",
            settlementStartTime: "",
            settlementEndTime: "",
            payableAmount: ""
        }*/
    ]
});

const rules = {
    contractNumber:[
        { required: true, message: '合同编码不能为空!', trigger: 'blur' }
    ],
    signPartyA:[
        { required: true, message: '甲方单位不能为空!', trigger: 'blur' }
    ],
    signPartyB:[
        { required: true, message: '乙方单位不能为空!', trigger: 'blur' }
    ],
    contractAmount:[
        { required: true, message: '合同总额不能为空!', trigger: 'blur' }
    ],
    contractName:[
        { required: true, message: '合同名称不能为空!', trigger: 'blur' }
    ],
    signingMethod:[
        { required: true, message: '签约方式不能为空!', trigger: 'change' }
    ],
    projectId:[
        { required: true, message: '所属项目不能为空!', trigger: 'blur' }
    ],
    capitalFlow:[
        { required: true, message: '资金流向不能为空!', trigger: 'change' }
    ],
    signTime:[
        { required: true, message: '签约时间不能为空!', trigger: 'change' }
    ],
    typeContract:[
        { required: true, message: '合同类型不能为空!', trigger: 'blur' }
    ],
    serviceStartTime: [
        { required: true, message: '服务期限不能为空', trigger: 'blur' }
    ],
    /*
        contractName: [
            { required: true, message: '合同名称不能为空', trigger: 'blur' }
        ],
        typeContract: [
            { required: true, message: '合同类型不能为空', trigger: 'blur' }
        ],
        contractId: [
            { required: true, message: '合同编号不能为空', trigger: 'blur' }
        ],
        signPartyA: [
            { required: true, message: '签约甲方不能为空', trigger: 'blur' }
        ],
        signPartyB: [
            { required: true, message: '签约乙方不能为空', trigger: 'blur' }
        ],

        contractAmount: [
            { required: true, message: '合同金额不能为空', trigger: 'blur' }
        ],
        signTime: [
            { required: true, message: '合同签订日期不能为空', trigger: 'blur' }
        ],
        contractContent: [
            { required: true, message: '合同内容不能为空', trigger: 'blur' }
        ],
        payExplain: [
            { required: true, message: '支付方式不能为空', trigger: 'blur' }
        ],
        remark: [{ required: true, message: '备注不能为空', trigger: 'blur' }],
        files: [{ required: true, message: '附件不能为空', trigger: 'blur' }]*/
}

const tableData = ref([])

const tableHead = ref([
    {
        prop: 'term',
        label: '期数'
    },
    {
        prop: 'moneyFlowType',
        label: '款项说明',
        formatter: (row) => {
            return row.moneyFlowType === 1 ? '流入' : '流出'
        }
    },
    {
        prop: 'settlementStartTime',
        label: '预计时间',
        formatter: (row) => {
            // return row.settlementStartTime.join('-')
            return row.settlementStartTime + '-' + row.settlementEndTime;
        }
    },
    {
        prop: 'payableAmount',
        label: '预计收支金额'
    }
])
const handel = () => {}
const deleteHandler = (row) => {
    // tableData.value = tableData.value.filter((item) => item.payId !== row.payId)
    formInline.fundPlans =  formInline.fundPlans.filter((item) => item.payId !== row.payId);
}
const addRow = () => {
    if(formInline.capitalFlow===''){
        ElMessage.warning('请选择合同资金流向!');
        return;
    }
    state.payItem.moneyFlowType = formInline.capitalFlow;
    // tableData.value.push(JSON.parse(JSON.stringify(state.payItem)));
    state.payItem.payId = nanoid();
    formInline.fundPlans.push(JSON.parse(JSON.stringify(state.payItem)));
}

/**
 * 返回
 */
const goBack = () => {
    router.go(-1)
}

const updateFiles = (e) => {

}

/**
 * 时间选择
 */
const serviceTimeChange = (e) => {
    if(e && Array.isArray(e)){
        formInline.serviceStartTime = e[0];
        formInline.serviceEndTime = e[1];
    }
    if(!e){
        formInline.serviceStartTime = '';
        formInline.serviceEndTime = '';
    }
}

/**
 * 时间选择
 * @param e
 */
const settlementTimeChange = (e) => {
    if(e && Array.isArray(e)){
        state.payItem.settlementStartTime = e[0];
        state.payItem.settlementEndTime = e[1];
    }
    if(!e){
        state.payItem.settlementStartTime = '';
        state.payItem.settlementEndTime = '';
    }
}

const formRef = ref(null)
const submit = () => {
    formRef.value.validate(async (valid, fields) => {
        if (valid) {
            // 新增合同款项信息
            contractManagementApi.createContract(formInline).then(res=>{
                if(res.code === '200'){
                    ElMessage.success('新增成功!');
                    goBack();
                }else{
                    ElMessage.error('新增失败!');
                }
            });
        }
    })
}

/**
 * 获取项目列表
 */
const getProjectList = (params) => {
    consoleApi.projectInvestment(params).then(res=>{
        if(res.code === '200'){
            state.projectList = res.data;
        }
    });
}

/**
 * 资金流向
 * @param e
 */
const capitalFlowChange = (e) => {
    formInline.fundPlans.forEach(item=>{
        item.moneyFlowType = e;
    });
}

onMounted(()=>{
    getProjectList({key:''});
});
</script>

<style lang="scss" scoped>
.el-form-item,
.el-select {
  width: 100%;
}
.box {
  border-radius: 10px;
  border: 1px solid #e3e7f1;
  padding: 34px 90px;
}
.table_class {
  margin-top: 20px;
  margin-bottom: 20px;
}
:deep(.el-input__wrapper) {
  width: 100%;
  height: 40px;
}
:deep(.el-date-editor) {
  width: 100%;
  height: 40px;
}
</style>
